<template>
  <v-main class="px-md-15">
    <v-toolbar height="90" color="white" light flat>
      <v-hover v-slot:default="{ hover }">
        <v-img
          max-width="55"
          :src="hover ? '/mi-home.png' : '/mi-logo.png'"
          style="background: #ff6700"
        ></v-img>
      </v-hover>
      <v-img
        src="/f58837161090e2e04bf687088b2ffe77.gif"
        max-width="165px"
      ></v-img>
      <v-btn
        @mouseover="activelink($event, null)"
        v-for="item in toolBar.links"
        :key="item"
        text
        >{{ item }}</v-btn
      >
      <v-spacer></v-spacer>
      <v-responsive max-width="260">
        <v-text-field
          outlined
          dense
          hide-details
          single-line
          append-icon="search"
          placeholder="耳机"
        >
        </v-text-field>
      </v-responsive>
    </v-toolbar>

    <v-list
      dark
      color="rgba(105,101,101,.5)"
      style="z-index: 1; position: absolute; width: 250px; height: 460px"
    >
      <v-list-item-group>
        <v-list-item v-for="i in 8" :key="i">
          <v-list-item-content>Test</v-list-item-content>
          <v-list-item-icon>
            <v-icon>mdi-chevron-right</v-icon>
          </v-list-item-icon>
        </v-list-item>
      </v-list-item-group>
    </v-list>
    <v-carousel
      cycle
      hide-delimiter-background
      :show-arrows="false"
      delimiter-icon="mdi-minus"
      height="auto"
    >
      <v-carousel-item v-for="(link, i) in imgLinks" :key="i">
        <v-img height="460" :src="link"></v-img>
      </v-carousel-item>
    </v-carousel>
  </v-main>
</template>

<script>
export default {
  data: () => ({
    toolBar: {
      links: ['小米手机', 'Redmi 红米', '电视', '笔记本', '家电'],
    },
    imgLinks: [
      'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fe25c546580ff179bf6e60fb54d7afd4.jpg?thumb=1&w=2452&h=920&f=webp&q=90',
      'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/676ddccc418842904f82ccdc66bbaa34.jpg?w=2452&h=920',
      'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cf6ba4d372b80e939104cf369f14139a.jpg?thumb=1&w=2452&h=920&f=webp&q=90',
      'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/449a09c7d198e08f690caf118902bb06.jpg?thumb=1&w=2452&h=920&f=webp&q=90',
    ],
  }),
  methods: {
    activelink(e, row) {
      console.log(e, row)
    },
  },
}
</script>
